<!--
 * @Author: your name
 * @Date: 2020-12-08 13:32:28
 * @LastEditTime: 2021-04-29 23:23:44
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /medicine-web/src/layout/index.vue
-->
<template>
  <div class="grid-video-container">
    <div class="grid-video-image__bg" alt="" :style="`width: 100%; height: 100%; background-image: url(${bgUrl});`"></div>
    <img class="grid-video-image__videoplay" :src="require('@/assets/image/video_play.png')" alt="" style="width: 40px; height: 40px">
    <div class="grid-video-title">
      <span>{{ timer }}</span>
      <span>{{ duration }}</span>
    </div>
    <div class="grid-video-subtitle">
      <div class="van-multi-ellipsis--l2">{{ title }}</div>
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'GridVideoItem',
  props: {
    gridItemData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      bgUrl: require('@/assets/image/image_placeholder.png'),
      timer: '',
      duration: '',
      title: ''
    }
  },
  mounted () {
    this.bgUrl = this.$uploadUrl + this.gridItemData.cover;
    this.timer = this.gridItemData.create_time.slice(0, 10);
    this.duration = this.gridItemData.duration;
    this.title = this.gridItemData.title;
  },
  components: {},
  computed: {},
  methods: {}
}
</script>

<style lang="scss">
@import '~@/assets/styles/flex.scss';
.grid-video-container {
  border-radius: 6px;
  position: relative;
  height: 160px;
  overflow: hidden;
  .grid-video-image__bg {
    z-index: -1;
    background-size: cover;
    background-position: 50% 50%;
  }
  .grid-video-image__videoplay {
    z-index: 3;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .grid-video-title {
    padding: 14px 16px;
    position: absolute;
    width: 100%;
    top: 0px;
    font-size: 1rem;
    color: #fff;
    @include flex-def;
    @include flex-cCenter;
    @include flex-zBetween;
    span {
      white-space: nowrap;
    }
  }
  .grid-video-subtitle {
    position: absolute;
    width: 100%;
    bottom: 0px;
    background-color: rgba(237, 41, 42, 0.8);
    font-size: 1rem;
    color: #fff;
    padding: 7px 16px;
  }
}
</style>
